<template>
    <div>
      <el-select
        @change="newProChange"
        multiple
        clearable
        filterable
        v-model="state.value"
      >
        <el-option
          v-for="item in state.newProOptions"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </div>
  </template>
  <script lang="ts" setup>
  import { reactive, inject, onMounted, onBeforeUnmount } from "vue";
  import { TableColumn, TableRow } from "@/utils/baTable";
  import type baTableClass from "@/utils/baTable";
  import useCurrentInstance from "@/utils/useCurrentInstance";
  
  const state: {
    newProOptions: anyObj[];
    value: string | number;
  } = reactive({
    newProOptions: [],
    value: "",
  });
  
  const { proxy } = useCurrentInstance();
  const baTable = inject("baTable") as baTableClass;
  const MasterPlan = inject("MasterPlan") as any;
  
  interface Props {
    renderValue: any; // 单元格值
    renderRow: TableRow; // 当前行数据
    renderField: TableColumn; // 当前列数据
  }
  const props = defineProps<Props>();
  
  proxy.eventBus.on("clearTag", () => {
    baTable.comSearch.form[props.renderField as any] = "";
    baTable.comSearch.form[props.renderField + "s"] = [];
    state.value = "";
  });
  
  const newProChange = (value: any) => {
    // console.log("value!", value, typeof value);
    state.value = value;
    if (value == "" || value.length == 0) {
      baTable.comSearch.form[props.renderField as any] = "";
      baTable.comSearch.form[props.renderField + "s"] = [];
    } else {
      if (value.length > 1) {
        baTable.comSearch.form[props.renderField as any] = "";
        baTable.comSearch.form[props.renderField + "s"] = value;
      } else {
        baTable.comSearch.form[props.renderField as any] = value[0];
      }
    }
  };
  
  //给到key
  const reset = (data: any[]) => {
    let len = data.length,
      newArr: any[] = [];
    for (let i = 0; i < len; i++) {
      newArr.push({
        name: data[i],
      });
    }
    state.newProOptions = newArr;
  };
  //获取物料列表数据
  const getcustNameInfo = () => {
    MasterPlan.getNewPro({ pageSize: 999999 })
      .then((res: any) => {
        reset(res.data);
      })
      .catch((err: any) => {});
  };
  
  onMounted(() => {
    //获取物料列表数据
    getcustNameInfo();
  });
  onBeforeUnmount(() => {
    proxy.eventBus.off("clearTag");
  });
  </script>
  <style lang="scss" scoped></style>
  